<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/reset.css">
  <style>
    .bg {
      width: 100%;
      height: 1000px;
      background: url(./images/0.jpg) no-repeat fixed 80% 80%;
      background-size: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      font-size: 12px;
      font-weight: 600;
    }

    .toggle {
      position: absolute;
      top: 0;
      left: 36px;
      z-index: 10;
      cursor: pointer;
    }

    .nav {
      width: 100%;
      height: 140px;
      position: absolute;
      top: -140px;
      transition: top 1s ease;
      z-index: 9;
      background: rgba(255, 255, 255, .8);
    }

    .nav .nav-list {
      width: 1060px;
      height: 140px;
      margin: 0 auto;
    }

    .nav .nav-list .item {
      width: 160px;
      height: 100px;
      background: #f7f7f7;
      border-radius: 10px;
      float: left;
      margin: 20px 20px 0 0;
      cursor: pointer;
      position: relative;
    }

    .nav .nav-list .item img {
      width: 160px;
      height: 100px;
    }

    .nav .nav-list .item.last {
      margin-right: 0;
    }

    .nav .nav-list .item:hover:after {
      content: '';
      width: 160px;
      height: 100px;
      text-align: center;
      background: rgba(0, 0, 0, .6);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
    }

    .nav .nav-list .item .tips {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
      width: 30px;
      height: 30px;
      background: url(images/tips.png) no-repeat -92px -2px;
      text-align: center;
    }
  </style>
</head>

<body>

  <div class="bg" id="bg"></div>
  <div class="toggle" id="toggle">
    <img src="images/button.png" alt="">
  </div>
  <div class="nav" id="nav">
    <ul class="nav-list" id="nav-list">
      <li class="item">
        <div class="tips"></div>
        <span class="tips"></span>
        <img src="images/0.jpg" alt="">
      </li>
      <li class="item">
        <img src="images/1.jpg" alt="">
      </li>
      <li class="item">
        <img src="images/2.jpg" alt="">
      </li>
      <li class="item">
        <img src="images/3.jpg" alt="">
      </li>
      <li class="item">
        <img src="images/4.jpg" alt="">
      </li>
      <li class="item last">
        <img src="images/5.jpg" alt="">
      </li>
    </ul>
  </div>
  <script src="./js/jquery.min.js"></script>
  <script>
    $(function() {
      var ols = $('#nav-list .item');
      var tips = `<div class="tips"></div>`;
      var count = 0;
      var flag = true;
      var getTop = () => flag ? 0 : -140;

      ols.eq(0).append(tips);

      ols.click(function() {
        var index = $(this).index();
        count = index;
        show(index);
        ols.eq(index).append(tips).siblings().find('.tips').remove();
      });

      ols.mouseover(function() {
        var index = $(this).index();
        show(index);
      });

      ols.mouseout(function() {
        show(count);
      });

      function show(x) {
        $('#bg').css('background-image', `url(./images/${x}.jpg)`);
      }

      $('#toggle').click(function() {
        $('#nav').css({
          top: getTop()
        });
        flag = !flag;
      });

      // 计算top值
      function getTop() {
        return flag ? 0 : -140
      }
    });
  </script>
</body>

</html>
